﻿@page "/tests/utilities/overflow"

<Row>
    <Column ColumnSize="ColumnSize.IsFull">
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Overflow</CardTitle>
            </CardHeader>
            <CardBody Padding="Padding.Is0.FromBottom">
                <Paragraph Margin="Margin.Is0.FromBottom">
                    Use these shorthand utilities for quickly configuring how content overflows an element.
                </Paragraph>
            </CardBody>
            <CardBody>
                <Div Display="Display.Flex.Row.OnDesktop">
                    <Div Overflow="Overflow.Auto" Padding="Padding.Is3" Margin="Margin.Is3.FromBottom.Is0.FromBottom.OnDesktop.Is3.FromRight.OnDesktop" Background="Background.Light" Style="max-width: 260px; max-height: 100px;">
                        This is an example of using <code>Overflow.Auto</code> on an element with set width and height dimensions. By design, this content will vertically scroll.
                    </Div>
                    <Div Overflow="Overflow.Hidden" Padding="Padding.Is3" Margin="Margin.Is3.FromBottom.Is0.FromBottom.OnDesktop.Is3.FromRight.OnDesktop" Background="Background.Light" Style="max-width: 260px; max-height: 100px;">
                        This is an example of using <code>Overflow.Hidden</code> on an element with set width and height dimensions.
                    </Div>
                    <Div Overflow="Overflow.Visible" Padding="Padding.Is3" Margin="Margin.Is3.FromBottom.Is0.FromBottom.OnDesktop.Is3.FromRight.OnDesktop" Background="Background.Light" Style="max-width: 260px; max-height: 100px;">
                        This is an example of using <code>Overflow.Visible</code> on an element with set width and height dimensions.
                    </Div>
                    <Div Overflow="Overflow.Scroll" Padding="Padding.Is3" Margin="Margin.Is3.FromBottom.Is0.FromBottom.OnDesktop.Is3.FromRight.OnDesktop" Background="Background.Light" Style="max-width: 260px; max-height: 100px;">
                        This is an example of using <code>Overflow.Scroll</code> on an element with set width and height dimensions.
                    </Div>
                </Div>
            </CardBody>
        </Card>
    </Column>
</Row>